<template>
  <div>
    <a-modal v-model:open="flag" title="添加" @ok="handleOk">
      <a-form :model="requestParam">
        <a-form-item label="文本框">
          <a-input v-model:value="requestParam.description" />
        </a-form-item>

        <a-form-item label="图标">
          <a-button @click="uploadIco" v-if="!requestParam.picture"
            >上传</a-button
          >

          <div v-else class="ico">
            <img
              :src="requestParam.picture"
              :style="{
                width: '120px',
                height: '120px',
              }"
            />
            <div class="mask">
              <img
                src="@/assets/delete.png"
                @click="requestParam.picture = ''"
              />
            </div>
          </div>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import $td from "@/components/td/index";
const flag = ref<boolean>(false);

let emit = defineEmits(["submit"]);

let requestParam = ref({
  id: 1,
  description: "描述",
  status: "状态",
  qrcode: "123",
  picture: "图片",
});

let requestParamStart: any = {
  id: null,
  description: null,
  status: null,
  qrcode: null,
  picture: null,
};

const open = (param: any) => {
  flag.value = true;
  if (param.id) {
    requestParam.value = JSON.parse(JSON.stringify(param));
    return;
  }
  requestParam.value = JSON.parse(JSON.stringify(requestParamStart));
};

const handleOk = () => {
  emit("submit");
  requestParam.value = JSON.parse(JSON.stringify(requestParamStart));
  flag.value = false;
  $td.message.success("添加成功");
  // $td.openLoading();
  // $td.request
  //   .request({
  //     url: "/admin/activation/add",
  //     method: "post",
  //     data: requestParam.value,
  //   })
  //   .then((res: any) => {
  //     if (res.data) {
  //       flag.value = false;
  //       $td.message.success("添加成功");
  //       emit("submit");
  //       requestParam.value = JSON.parse(JSON.stringify(requestParamStart));
  //       return;
  //     }
  //     $td.message.error("添加失败");
  //   });
};

let uploadIco = async () => {
  let file = await $td.request.selectFile("image/*");

  if (!file) return;

  let res: any = await $td.upload.adminUpload({
    file,
  });

  console.log(res);
};

defineExpose({
  open,
});
</script>

<style scoped>
.ico {
  width: 120px;
  position: relative;
}

.ico img {
  width: 100%;
  height: 100%;
}

.ico .mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  opacity: 0;
}

.ico:hover .mask {
  opacity: 1;
}

.mask img {
  width: 20px;
  height: 20px;
  cursor: pointer;
}
</style>
